import React from 'react';

import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

import Tab from './tab';
import { openMoreWin } from '../../portal/elements/util/common';


export default class Header extends React.Component {
    getCss = () => {
        const { title, titleContainer, toolbar } = this.refs;
        let titleDom = $(title);
        let toolbarDom = $(toolbar);
        let titleContainerDom = $(titleContainer);
        if (titleContainerDom.length > 0) {
            let left = 0;
            let right = 0;
            if (titleDom.length > 0) {
                let width = titleDom.width();
                left = titleDom.css('left');
                left = left.split('px')[0];
                left = parseInt(width) + parseInt(left) + 22;
            }
            if (toolbarDom.length > 0) {
                let width = toolbarDom.width();
                right = toolbarDom.css('right');
                right = right.split('px')[0];
                right = parseInt(width) + parseInt(right);
            }
            titleContainerDom.css({ width: `calc(100% - ${left}px - ${right}px)`, left: `${left}px` });
        }
    }

    onClickMore = () => {
        const { moreUrl } = this.props;
        if (moreUrl && moreUrl != '') {
            window.open(moreUrl, '_blank');
        }
    }


    render() {
        const { id, data, tabId, onChange, onLoad, hideTab } = this.props;
        const { items, setting, style } = data;
        const { title, showTab } = setting;
        const { iconLogo, titleState, displayPosition, refreshIconState, iconRefresh, moreLocal, iconMore } = style;


        return (
            <div className="header" id={`header_${id}`} style={{ display: titleState == 'hidden' ? 'none' : 'block' }}>
                <span className="icon" id={`icon_${id}`}><img src={iconLogo} /></span>
                {
                    title && title != '' ? (
                        <span className="title" id={`title_${id}`} ref="title">{title}</span>
                    ) : null
                }

                {
                    displayPosition == 'right' && (items.length > 1 || (items.length > 0 && showTab == true)) && !hideTab ? (
                        <div className="titlecontainer " id={`titleContainer_${id}`} ref="titleContainer" style={{ position: 'absolute' }} onLoad={this.getCss()}>
                            <Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@ff0ffw`} items={items} setting={setting} onChange={onChange} tabId={tabId} />
                        </div>
                    ) : ''
                }
                {
                    (refreshIconState != 'hidden' || moreLocal != 'hidden') ? (
                        <span className="toolbar" style={{ position: 'absolute' }} id={`toolbar_${id}`} ref="toolbar">
                            <ul>
                                 {
                                     refreshIconState == 'show' ? (
                                         <li>
                                             <a href="javascript:void(0);" name="refreshbtn" id={`refresh_${id}`} onClick={() => { onLoad(); }}>
                                                 <img src={iconRefresh} border="0" title={getLabel(502292, '刷新')} onLoad={this.getCss} />
                                             </a>
                                         </li>
                                     ) : null
                                 }
                                {
                                    moreLocal == 'title' ? (
                                        <a id={`more_${id}`} href="javascript:void(0);" onClick={() => { this.onClickMore(); }}>
                                            <img className="img_more" id="imgMore" border="0" src={iconMore} title={getLabel(17499, '更多')} onLoad={this.getCss} alt="" />
                                        </a>
                                    ) : null
                                }
                            </ul>
                        </span>
                    ) : null
                }
            </div>


        );
    }
}
